<!---@components: AiToolBox: @/views/aitools/components/AiToolBox/index.vue------>
<template>
  <div class="ai-tools-box flex w-full flex-col items-center">
    <el-tabs v-model="activeName" class="w-[500px]" @tab-change="onChange">
      <el-tab-pane v-for="tab in typeList" :key="tab.type" :label="tab.label" :name="tab.type" />
    </el-tabs>
    <ToolList :tools="tools" />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import ToolList from './ToolList.vue'
  import { TypeList as typeData, Tools as toolData } from '../data.ts'
  import type { TypeItem, ToolItem } from '../data.ts'

  const activeName = ref('common')
  const typeList = ref<TypeItem[]>(typeData)
  const toolList = ref<ToolItem[]>(toolData)
  const tools = ref<ToolItem[]>([])
  const onChange = (type: string) => {
    let sortId: number[] = []
    switch (type) {
      case 'document':
        sortId = [4, 2, 5, 11]
        break
      case 'office':
        sortId = [3, 8, 9, 6, 7, 10]
        break
      case 'study':
        sortId = [12, 13, 14]
        break
    }

    // 先筛选
    let result = toolList.value.filter(tool => tool.type.split(',').includes(type))

    // 如果有排序规则，就按 sortId 顺序排
    if (sortId.length > 0) {
      result = result.sort((a, b) => {
        const indexA = sortId.indexOf(Number(a.id))
        const indexB = sortId.indexOf(Number(b.id))

        // 如果 id 在 sortId 中，按索引排序
        if (indexA !== -1 && indexB !== -1) {
          return indexA - indexB
        }
        // 只有一个在 sortId 中，则它优先
        if (indexA !== -1) return -1
        if (indexB !== -1) return 1
        // 都不在 sortId 中，保持原有顺序
        return 0
      })
    }

    tools.value = result
  }

  onMounted(() => {
    tools.value = toolList.value.filter(tool => tool.type.split(',').includes('common'))
  })
</script>

<style scoped lang="scss"></style>
